<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Personal-web</title>
    @@include("./common/_header.html",{"filename":"personal"})
</head>

<body>
    @@include("./common/_menu2.html",{"class1":"","class2":"","class3":"","class4":"","class5":""})
    <div class="content personal">
        <div class="person">
            <img src="./images/personal/recommend_avatar@2x.png">
            <div>
                <h5 class="name">xianggelila</h5>
                <p class="intro">wo shi jian duan de jie shao</p>
            </div>
        </div>
        <div class="avatar mobile">
            <img src="./images/personal/recommend_avatar@2x.png">
            <i></i>
        </div>
        <div class="list">
            <ul class="sub-menu">
                <li>Profile</li>
                <li class="current">Account</li>
            </ul>

            <div class="profile block hide">
                <div class="avatar">
                    <img src="./images/personal/recommend_avatar@2x.png">
                    <i></i>
                </div>
                <div class="label">
                    UserName:
                </div>
                <div class="name">
                    <input type="text" name="" placeholder="">
                </div>
                <div class="label">
                    Bio:
                </div>
                <div class="blo">
                    <textarea maxlength="100"></textarea>
                    <p class="tip">No more than 100 characters</p>
                </div>
                <div class="save"><input type="button" name="" value="Save"></div>
            </div>
            <div class="account block">
                <div class="banner">
                    ACCOUNT PREFERENCES
                </div>
                <div class="label">
                    Email:
                </div>
                <div class="email">
                    <input type="text" name="">
                </div>
                <div class="label">
                    Password:
                </div>
                <div class="password">
                    <div class="pas">
                        <input class="hide  pas-see" type="text" name="">
                        <input class="pas-encry" type="Password" name=""><i class="see"></i></div>
                    <input class="change-password" type="button" name="" value="Change Password">
                </div>
                <div class="banner">
                    CONNECTED ACCOUNTS
                </div>
                <ul class="connect-list">
                    <li>
                        <div class="left-content">
                            <h5 class="title">Connect to Google:</h5>
                            <p>Connect account to log in to Reddit with Google</p>
                        </div>
                       <div class="right-content">
                            <div class="connect">
                                <span class="img-google"></span>
                                <input type="button" name="" value="Connect to Google">
                            </div>
                            <div class="disconnect hide">
                                <p>@Google name</p>
                                <a href="javascript:void(0)">disconnect</a>
                            </div>
                       </div>
                    </li>
                    <li>
                        <div class="left-content">
                            <h5 class="title">Connect to Facebook:</h5>
                            <p>Connect account to log in to Reddit with Facebook</p>
                        </div>
                       <div class="right-content">
                            <div class="connect">
                                <span class="img-facebook"></span>
                                <input type="button" name="" value="Connect to Facebook">
                            </div>
                            <div class="disconnect hide">
                                <p>@Facebook name</p>
                                <a href="javascript:void(0)">disconnect</a>
                            </div>
                       </div>
                    </li>
                </ul>
                <div class="logout"><input type="button" name="" value="Log Out"></div>
            </div>
        </div>
        @@include("./common/_footer.html")
    </div>
<input id="img-upload" type="file" name="" accept="image/jpeg,image/jpg,image/png">
@@include("./common/_lastFooter1.html",{"filename":"personal"})
</body>
</html>
